<template>
	<view class="content">
		<view class="head">
			<button class="ss-reset-button ut-registe-back" @tap="onBack">
				<uni-icons class="ut-back-icon" type="left" size="20" color="#000" />
			</button>
			<view class="ut-welcome-text">
				<view>Choose the  language</view>
			</view>
		</view>
		<view class="form-box">
			<view class="form">
				<view
					v-for="lang in langList"
					:key="lang.code"
					:class="{'lang-item-selected': lang.isSelected}"
					class="ut-lang-item"
					@click="onChange(lang)"
				>
					<view class="ut-lang-item--left">
						<image :src="`/static/flag/${lang.code}.png`" />
						<text class="ut-lang-text">{{ lang.name }}</text>
					</view>
					<radio
						:checked="lang.isSelected"
						activeBorderColor="#EA0D2C"
						activeBackgroundColor="#EA0D2C"
						@click="onChange(lang)"
					/>
				</view>
				<button class="ss-reset-button login-btn" @tap="onContine">{{ $t("app.continue") }}</button>
			</view>
		</view>
	</view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { ref } from 'vue';
import { isEmpty } from 'xe-utils';
import { tenantId, navigateBack } from '@/utils';
import { getLanuage } from '@/api'

const langList = ref([])

let lang = ""

const onChange = (item) => {
	langList.value.forEach(_ => {
		_.isSelected = _.id === item.id
	})
	lang = item
}

const onContine = () => {
	sheep.$store("user").$patch(state => {
		state.langList = langList.value
		state.lang = lang
		uni.setStorageSync("kLang", lang)
		onBack()
	})
}

const getLangList = () => {
	lang = uni.getStorageSync("kLang")
	getLanuage({tenantId}).then(data => {
		if (isEmpty(lang)) {
			// 默认英文
			lang = data.find(f => f.code === "en")
			uni.setStorageSync("kLang", lang)
		}
		data.forEach(_ => {
			_.isSelected = lang.code === _.code
		})
		langList.value = data
	})
}

const onBack = () => {
	navigateBack()
}

onLoad(() => {
	getLangList()
})

</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100vh;
		background-color: #fff;

		.head {
			display: flex;
			flex-direction: column;
			width: 100%;
			margin-top:64rpx;
			height: 20h;
			padding-left: 36rpx;
			padding-bottom: 48rpx;
			.ut-registe-back {
				background-color: transparent;
				display: initial;
				padding: 0;
				margin: 0;
				width: 120rpx;
				height: 120rpx;
				text-align: left;
				.ut-back-icon {
					border: 1px solid #666;
					border-radius: 10rpx;
					padding: 12rpx;
					font-weight: 700;
				}
			}
			.uni-button:after {
				width: 120rpx;
				height: 120rpx;
				border: none
			}
			.ut-welcome-text {
				font-size: 52rpx;
				font-weight: bolder;
			}
		}

		.form-box {
			position: relative;
			display: flex;
			align-items: center;
			flex-direction: column;
			// height: 70vh;

			.form {
				z-index: 2;
				// position: absolute;
				width: 100%;
				
				.ut-lang-item {
					margin: 24rpx 36rpx;
					padding: 24rpx 36rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.ut-lang-item--left {
						display: flex;
						align-items: center;
						.ut-lang-text {
							padding-left: 36rpx;
							font-size: 40rpx;
						}
						image {
							height: 60rpx;
							width: 100rpx;
						}
					}
				}

				.lang-item-selected {
					border: 1px solid #dadada;
					border-radius: 24rpx;
					background-color: #fafafa;
				}
				

				.login-btn {
					margin: 24rpx 36rpx;
					padding: 24rpx 36rpx;
					margin-top: 36rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					height: 100rpx;
					border-radius: 24rpx;
					font-size: 30rpx;
					background: #EA0D2C;
					letter-spacing: 2rpx;
					color: #FFF;
					font-weight: bold;
				}
			}
		}
	}
</style>